<template>
  <div class="main-content logger-wrapper">
    <div class="filter-box">
      <p class="title">操作日志查询</p>

      <el-form
        :inline="true"
        :model="form"
        label-width="70px"
        label-position="left"
      >
        <div class="item">
          <el-form-item label="操作类型">
            <el-select
              v-model="form.logType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in logTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              range-separator="至"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDate"
            />
          </el-form-item>
          <el-form-item label="">
            <div class="btn-box">
              <el-button
                type="primary"
                @click="searchFn">
                查询
              </el-button>
              <!-- 重置 -->
              <el-button
                type=""
                @click="restFn">
                重置
              </el-button>

            </div>
          </el-form-item>
        </div>
        <div class="item">
          <!-- <el-form-item label="操作人">
            <el-input
              v-model="form.userName"
              placeholder="请输入"
              clearable
              @clear="searchFn"
            />
          </el-form-item> -->

        </div>
        
      </el-form>
      
    </div>

    <div class="content-box">
      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:logType="scope">
          <span>{{ handleLogType(scope.row.logType) }}</span>
        </template>
        <template v-slot:operatedType="scope">
          <span>{{ scope.row.operatedType === 1 ? "客户" : "伙伴" }}</span>
        </template>
      </ct-table>

      <ct-pagination :options="pageOptions" :pageEvent="getListData">
      </ct-pagination>
    </div>
  </div>
</template>

<script setup>
import { getOperateLogList } from "@/api/index";

import { useRoute } from "vue-router";
const route = useRoute();

const { proxy } = getCurrentInstance();

import CtTable from "@/components/CtTable.vue";
import CtPagination from "@/components/Pagination.vue";

import { usePageOptions } from "@/hooks/usePageOptions";
const { pageOptions } = usePageOptions();

let form = ref({
  logType: "",
  date: "",
  start: "",
  end: "",
  userName: "",
});

const logTypeOptions = ref([
 {
    value: 'TRANSFER_VOUCHER',
    label: "算力券划拨",
  },
  {
    value: 'GIVE',
    label: "赠送",
  },
  {
    value: 'ADD_PARTNER',
    label: "增加伙伴",
  },
  {
    value: 'ADJUST_DISCOUNT_RATIO',
    label: "折扣调整",
  }
]);


function handleLogType(logType) {
  const findItem = logTypeOptions.value.find((item) => item.value === logType);
  return findItem ? findItem.label : "";
}

let tableOptions = reactive({
  data: [],
  loading: false,
  columns: [
    {
      label: "序号",
      prop: "index",
      width: 80,
      isCustom: true,
    },
    {
      label: "日志类型",
      prop: "logType",
    },
    {
      label: "操作对象",
      prop: "accountName",
    },
    {
      label: "账号",
      prop: "nickname",
    },
    {
      label: "操作时间",
      prop: "createTime",
    },
    {
      label: "操作内容",
      prop: "content",
    },
  ],
});

function getListData() {
  tableOptions.loading = true;
  const { currentPage, pageSize } = pageOptions;
  const { logType, userName, start, end } = form.value;

  getOperateLogList({
    endTime:end,
    logType,
    page: currentPage ,
    pageSize,
    startTime:start,
  })
    .then((res) => {
      const { content, totalElements } = res.data;
      if (content.length) {
        for (let i = 0; i < content.length; i++) {
          content[i].index = proxy.$handleIndex(i, pageOptions);
        }
      }
      tableOptions.data = content;
      tableOptions.loading = false;
      totalElements.total = total;
    })
    .catch(() => {
      tableOptions.loading = false;
    });
}

const restFn =()=>{
  form.value = {
    logType: "",
    date: "",
    start: "",
    end: "",
    userName: "",
  }
  getListData();
}

const searchFn = proxy.$debounce(() => {
  tableOptions.data = [];
  pageOptions.currentPage = 1;
  pageOptions.total = 0;

  getListData();
});

function changeDate(value) {
  if (value) {
    form.value.start = value[0] + " 00:00:00";
    form.value.end = value[1] + " 23:59:59";
  } else {
    form.value.start = "";
    form.value.end = "";
  }

  searchFn();
}

let memberId = ref("");

onMounted(() => {
  memberId.value = route.query.memberId || "";
  form.value.logType = route.query.logType ? Number(route.query.logType) : "";

  getListData();
});
</script>

<style lang="scss" scoped>
.logger-wrapper {
}
</style>
